{% extends 'custom_admin/base.html' %}

{% block content %}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">
            <i class="fas fa-box me-2"></i>{{ title }}
            <span class="badge bg-primary ms-2">{{ total_count }} 个产品</span>
        </h5>
        <div class="d-flex gap-2">
            <!-- 搜索框 -->
            <form method="get" class="d-flex">
                <input type="hidden" name="order" value="{{ order }}">
                <input type="text" name="search" value="{{ search }}" 
                       class="form-control search-box me-2" placeholder="搜索产品名称或店铺...">
                <button type="submit" class="btn btn-outline-primary">
                    <i class="fas fa-search"></i>
                </button>
            </form>
        </div>
    </div>
    
    <div class="card-body p-0">
        <!-- 排序选项 -->
        <div class="p-3 border-bottom bg-light">
            <div class="btn-group" role="group">
                <a href="?order=price&search={{ search }}" 
                   class="btn {% if order == 'price' %}btn-primary{% else %}btn-outline-primary{% endif %}">
                    <i class="fas fa-dollar-sign me-1"></i>价格排序
                </a>
                <a href="?order=collect&search={{ search }}" 
                   class="btn {% if order == 'collect' %}btn-primary{% else %}btn-outline-primary{% endif %}">
                    <i class="fas fa-heart me-1"></i>收藏排序
                </a>
                <a href="?order=rate&search={{ search }}" 
                   class="btn {% if order == 'rate' %}btn-primary{% else %}btn-outline-primary{% endif %}">
                    <i class="fas fa-star me-1"></i>评分排序
                </a>
            </div>
            {% if search %}
                <div class="mt-2">
                    <span class="badge bg-info">
                        <i class="fas fa-search me-1"></i>搜索: "{{ search }}"
                    </span>
                    <a href="?order={{ order }}" class="btn btn-sm btn-outline-secondary ms-2">
                        <i class="fas fa-times me-1"></i>清除搜索
                    </a>
                </div>
            {% endif %}
        </div>
        
        <!-- 产品表格 -->
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th width="8%">ID</th>
                        <th width="35%">产品名称</th>
                        <th width="12%">价格</th>
                        <th width="15%">店铺名称</th>
                        <th width="12%">店铺类型</th>
                        <th width="8%">评价数</th>
                        <th width="10%">操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for product in products %}
                    <tr>
                        <td>
                            <span class="badge bg-secondary"># {{ product.id }}</span>
                        </td>
                        <td>
                            <div class="d-flex align-items-center">
                                {% if product.image_link %}
                                    <img src="{{ product.image_link.url }}" 
                                         class="rounded me-2" width="40" height="40"
                                         style="object-fit: cover;" 
                                         onerror="this.src='data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"%3E%3Crect width=\"40\" height=\"40\" fill=\"%23e9ecef\"%3E%3C/rect%3E%3Ctext x=\"50%25\" y=\"50%25\" font-size=\"12\" text-anchor=\"middle\" dy=\".3em\" fill=\"%236c757d\"%3E图片%3C/text%3E%3C/svg%3E'">
                                {% else %}
                                    <div class="bg-light rounded me-2 d-flex align-items-center justify-content-center" 
                                         style="width: 40px; height: 40px; font-size: 12px; color: #6c757d;">
                                        图片
                                    </div>
                                {% endif %}
                                <div>
                                    <div class="fw-bold">
                                        {{ product.name|truncatechars:40 }}
                                    </div>
                                    {% if product.name|length > 40 %}
                                        <small class="text-muted" title="{{ product.name }}">
                                            点击查看完整名称
                                        </small>
                                    {% endif %}
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="badge bg-success fs-6">
                                ¥{{ product.price|floatformat:2 }}
                            </span>
                        </td>
                        <td>{{ product.shop_name|truncatechars:20 }}</td>
                        <td>
                            <span class="badge bg-info">{{ product.shop_type }}</span>
                        </td>
                        <td>
                            <span class="badge bg-warning">{{ product.d_rate_nums }}</span>
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="{% url 'custom_admin_product_detail' product.id %}" 
                                   class="btn btn-outline-primary" title="查看详情">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <button onclick="deleteProduct({{ product.id }}, '{{ product.name|truncatechars:20 }}')" 
                                        class="btn btn-outline-danger" title="删除产品">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="7" class="text-center py-4">
                            <div class="text-muted">
                                <i class="fas fa-inbox fa-3x mb-3 d-block"></i>
                                {% if search %}
                                    没有找到与 "{{ search }}" 相关的产品
                                {% else %}
                                    暂无产品数据
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <!-- 分页 -->
        {% if page_obj.has_other_pages %}
        <div class="card-footer">
            <nav aria-label="产品分页">
                <ul class="pagination justify-content-center mb-0">
                    {% if page_obj.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?page=1&order={{ order }}&search={{ search }}">首页</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.previous_page_number }}&order={{ order }}&search={{ search }}">上一页</a>
                        </li>
                    {% endif %}
                    
                    {% for num in page_obj.paginator.page_range %}
                        {% if page_obj.number == num %}
                            <li class="page-item active">
                                <span class="page-link">{{ num }}</span>
                            </li>
                        {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ num }}&order={{ order }}&search={{ search }}">{{ num }}</a>
                            </li>
                        {% endif %}
                    {% endfor %}
                    
                    {% if page_obj.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.next_page_number }}&order={{ order }}&search={{ search }}">下一页</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}&order={{ order }}&search={{ search }}">末页</a>
                        </li>
                    {% endif %}
                </ul>
            </nav>
            <div class="text-center mt-2">
                <small class="text-muted">
                    第 {{ page_obj.number }} 页，共 {{ page_obj.paginator.num_pages }} 页
                    (总计 {{ total_count }} 个产品)
                </small>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function deleteProduct(productId, productName) {
    if (confirm(`确定要删除产品 "${productName}" 吗？此操作不可恢复。`)) {
        $.post(`/custom-admin/api/delete-product/${productId}/`, {
            csrfmiddlewaretoken: '{{ csrf_token }}'
        })
        .done(function(data) {
            if (data.success) {
                alert(data.message);
                location.reload();
            } else {
                alert('删除失败: ' + data.message);
            }
        })
        .fail(function() {
            alert('网络错误，请重试');
        });
    }
}

// 表格行悬停效果
$(document).ready(function() {
    $('tbody tr').hover(
        function() {
            $(this).addClass('table-active');
        },
        function() {
            $(this).removeClass('table-active');
        }
    );
});
</script>
{% endblock %}